<template>
  <div class="statistical-3 statistical">
    <div class="col blur">
      <BlockItem style="height: 40%" class="block-item" :title="(new Date().getFullYear()-1)+'年度全市人才总量及投入'" type="1">
        <div class="talent-total" v-loading="loading.talentTotal" element-loading-background="rgba(0, 0, 0, 0.4)" >
          <div class="talent-item" style="margin-bottom: 20px">
            <div class="label">人才总量</div>
            <div class="total" style="color: #e6922b">{{talentTotal.total.value}}</div>
            <div class="compare">较上年：<div style="color: #e6922b" class="change">{{talentTotal.total.change}}</div></div>
          </div>
          <div class="talent-item" style="margin-bottom: 20px">
            <div class="label">各类人才占人口比例</div>
            <div class="total" style="color: #e6922b">{{talentTotal.talent_proportion.value}}</div>
            <div class="compare">较上年：<div style="color: #e6922b" class="change">{{talentTotal.talent_proportion.change}}</div></div>
          </div>
          <div class="talent-item">
            <div class="label">人才发展专项资金</div>
            <div class="total" style="color: #19f3d6">{{talentTotal.money.value}}</div>
            <div class="compare">较上年：<div style="color: #19f3d6" class="change">{{talentTotal.money.change}}</div></div>
          </div>
          <div class="talent-item">
            <div class="label">市本级人才发展专项资金</div>
            <div class="total" style="color: #19f3d6">{{talentTotal.city_money.value}}</div>
            <div class="compare">较上年：<div style="color: #19f3d6" class="change">{{talentTotal.city_money.change}}</div></div>
          </div>
        </div>
      </BlockItem>
      <BlockItem style="height: 30%" class="block-item" title="重点科研机构数据" type="1">
        <div class="important-scientific" v-loading="loading.importantScientific" element-loading-background="rgba(0, 0, 0, 0.4)" >
          <div class="scientific-info">
            <div class="text">重点科研机构</div>
            <div class="text">机构总数<span style="vertical-align: sub" class="number">{{ importantScientific.total }}</span>座</div>
            <div class="scientific-title">
              <div class="title-style">
                <img src="@/assets/images/money.png">
                总签约金额<div class="amount">347665万元</div>
              </div>
            </div>
            <div class="year">
              <div class="year-item">
                <div class="year-text">2020年政府经费总投入</div>
                <div class="number">0<div class="unit">元</div></div>
              </div>
              <div class="year-item">
                <div class="year-text">2021年政府经费总投入</div>
                <div class="number">0<div class="unit">元</div></div>
              </div>
            </div>
          </div>
          <div class="scientific-chart">
            <div class="scientific-title">所属区县</div>
            <div class="chart" id="chart1"></div>
          </div>
        </div>
      </BlockItem>
      <BlockItem style="height: 30%" class="block-item" title="重点科研机构TOP10" type="1">
        <div class="scientific" v-loading="loading.importantScientific" element-loading-background="rgba(0, 0, 0, 0.4)" >
          <Ranking></Ranking>
        </div>
      </BlockItem>
    </div>
    <div class="col full">
      <BlockItem style="height: 65%" class="block-item">
        <div class="number-block">
          <NumberItem v-loading="loading.number" element-loading-background="rgba(0, 0, 0, 0.4)" class="number-item" v-for="item in numberData" :key="item.id" :name="item.name" :number="item.number" :color="item.color" :unit="item.unit" :icon="item.icon"></NumberItem>
        </div>
        <Map class="global-map"></Map>
      </BlockItem>
      <BlockItem style="height: 35%"  class="block-item blur">
        <div class="chart" id="chart2"></div>
      </BlockItem>
    </div>
    <div class="col blur">
      <BlockItem style="height: 50%"  class="block-item" title="研究生、本科市属国有企业人才引进汇总" type="1">
        <div class="chart" id="chart3"></div>
      </BlockItem>
      <BlockItem style="height: 50%"  class="block-item" title="人才孵化数据" type="1">
        <div class="talent-hatch">
          <IconNumber2 class="icon-number2" name="投入金额" value="1722万元" icon="1"></IconNumber2>
          <IconNumber2 class="icon-number2" name="入驻人才" value="516人" icon="2"></IconNumber2>
          <IconNumber2 class="icon-number2" name="人才项目" value="25个" icon="3"></IconNumber2>
          <IconNumber2 class="icon-number2" name="高端项目" value="9个" icon="4"></IconNumber2>
        </div>
      </BlockItem>
    </div>
  </div>
</template>

<script>

import NumberItem from "@/components/NumberItem/NumberItem.vue";
import {getRandomNum} from "@/utils/utils";
import {getArrByKey} from "@/utils/chart";
import {
  importantScientific, talentTechnology,
  talentTotal
} from "@/api/statistical3";
import {getTotalCount} from "@/api/statistical1";
import BlockItem from "@/components/BlockItem/BlockItem.vue";
import Ranking from "@/components/Ranking/Ranking.vue";
import IconNumber2 from "@/components/IconNumber2.vue";
import Map from "@/components/Map.vue";

export default {
  name: "Statistical3",
  components: {Map, IconNumber2, Ranking, BlockItem, NumberItem},
  data() {
    return {
      charts: {
        chart1: null,
        chart2: null,
        chart3: null,
      },
      numberData: [
        {
          id: 1,
          unit: '万人',
          color: ['#5c6affb3', '#4a29d8b3'],
          name: '人才总量',
          icon: 'icon-rencaifuwu',
          number: 0
        },
        {
          id: 2,
          unit: '%',
          color: ['#30cbf7b3', '#1997e1b3'],
          name: '各类人才占人口比例',
          icon: 'icon-fenlei',
          number: 0
        },
        {
          id: 3,
          unit: '万元',
          color: ['#12f1b8b3', '#0db5e6b3'],
          name: '人才发展专项资金',
          icon: 'icon-zijin',
          number: 0
        },
        {
          id: 4,
          unit: '万元',
          color: ['#f7c759b3', '#fb838fb3'],
          name: '市本级人才发展专项资金',
          icon: 'icon-zijin',
          number: 0
        },
      ],
      loading:{
        number:false,
        talentTotal:false,
        importantScientific:false,
      },
      talentTotal:{
        city_money:{
          change:'0%',
          name:'市本级人才发展专项资金',
          value:0
        },
        money:{
          change:'0%',
          name:'人才发展专项资金',
          value:0
        },
        talent_proportion:{
          change:'0%',
          name:'各类人才占人口比例',
          value:0
        },
        total:{
          change:'0%',
          name:'人才总量',
          value:0
        },
      },
      importantScientific:{
        total:0,
        chart:[],
      }
    }
  },
  methods: {
    totalCount(){
      this.loading.number=true
      getTotalCount().then(data=>{
        this.numberData[0].number=data.total.value
        this.numberData[1].number=data.talent_proportion.value
        this.numberData[2].number=data.money.value
        this.numberData[3].number=data.city_money.value
      }).finally(()=>{
        this.loading.number=false
      })
    },
    getTalentTotal(){
      this.loading.talentTotal=true
      talentTotal({year:new Date().getFullYear()-1}).then(res=>{
        this.talentTotal=res;
      }).finally(()=>{
        this.loading.talentTotal=false
      })
    },
    getImportantScientific(){
      this.loading.importantScientific=true;
      importantScientific().then(res=>{
        this.importantScientific=res;
        this.initImportantScientificChart();
      }).finally(()=>{
        this.loading.importantScientific=false
      })
    },
    initImportantScientificChart(){
      this.charts.chart1 = this.$echarts.init(document.getElementById('chart1'));
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '0%',
          right: '2%',
          bottom: '2%',
          top: '2%',
          containLabel: true
        },
        xAxis: {
          type:"value",
          axisLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {
            show: false, textStyle: {color: '#fff', fontSize: 12}, formatter: (e) => {
              return e.length >= 4 ? e.slice(0, (e.length / 2)) + '\n' + e.slice(e.length / 2) : e;
            }
          },
          axisTick: {show: false},
          splitLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
        },
        yAxis: {
          type:'category',
          axisLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff',fontSize:10}},
          axisTick: {show: false},
          splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          data: getArrByKey(this.importantScientific.chart, 'name'),
        },
        series: [
          {
            name:'数量',
            type:'bar',
            barWidth:6,
            data:getArrByKey(this.importantScientific.chart, 'value'),
            itemStyle:{
              color:new this.$echarts.graphic.LinearGradient(0,0,1,0,[{
                offset:0,
                color:'#1ddcf0'
              },{
                offset:1,
                color:'#4d65c9'
              }])
            }
          }
        ]
      }
      this.charts.chart1.hideLoading();
      this.charts.chart1.setOption(option)
    },
    async initTechnology(){
      this.charts.chart2 = this.$echarts.init(document.getElementById('chart2'));
      this.charts.chart2.showLoading({
        text: '加载中',
        textColor: '#fff',
        maskColor: 'rgba(0,0,0,0)'
      })
      let data=await talentTechnology();
      let option = {
        tooltip: {
          show: true,
          trigger: 'axis',
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '5%',
          top: '30%',
          containLabel: true
        },
        title: {
          text: '人才技术领域',
          left: 'center',
          top: 15,
          textStyle: {
            color: '#fff',
            fontSize: 17,
            fontWeight: 'bold'
          }
        },
        xAxis: {
          type: 'category',
          data: getArrByKey(data,'name'),
          axisLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff', fontSize: 10}},
          axisTick: {show: false},
          splitLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
        },
        yAxis: {
          type: 'value',
          name: '单位：人',
          nameTextStyle: {
            color: '#fff',
            fontSize: 14,
          },
          axisLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff',}},
          axisTick: {show: false},
          splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
        },
        series: [
          {
            data: getArrByKey(data,'value'),
            type: 'bar',
            barWidth:18,
            itemStyle:{
              color:new this.$echarts.graphic.LinearGradient(0,1,0,0,[{
                offset:0,
                color:'rgba(2,213,120,0.1)'
              },{
                offset:1,
                color:'#02d578'
              }]),
              borderWidth:1,
              borderColor:'#02d578',
            }
          }
        ]
      }
      this.charts.chart2.hideLoading();
      this.charts.chart2.setOption(option)
    },
    async initEnterpriseTalent(){
      this.charts.chart3 = this.$echarts.init(document.getElementById('chart3'));
      this.charts.chart3.showLoading({
        text: '加载中',
        textColor: '#fff',
        maskColor: 'rgba(0,0,0,0)'
      })
      //let data=await enterpriseTalent();
      let option = {
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '20%',
          containLabel: true
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          left: 'center',
          top: '55',
          textStyle: {
            color: '#fff'
          }
        },
        xAxis: {
          axisLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {
            show: true, textStyle: {color: '#fff', fontSize: 14},
          },
          axisTick: {show: false},
          splitLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          data: ['2019年', '2020年', '2021年', '2022年'],
        },
        yAxis: {
          name: '单位：人',
          nameTextStyle: {
            color: '#fff',
            fontSize: 14,
          },
          axisLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff',}},
          axisTick: {show: false},
          splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
        },
        series: [
          {
            data: getRandomNum(4, 300, 200),
            name: '研究生',
            type: 'pictorialBar',
            legendHoverLink: true,
            label: {
              show: true,
              position: 'top',
              rotate: 0,
              color: '#fff'
            },
            barGap: '60%',
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#0090d9'
              },
              {
                offset: 1,
                color: 'rgba(0,144,217,0.5)'
              }
            ]),
            barWidth: 15,
            symbol: 'roundRect',
          }, {
            barGap: '60%',
            data: getRandomNum(4, 300, 200),
            name: '本科生',
            type: 'pictorialBar',
            legendHoverLink: true,
            label: {
              show: true,
              position: 'top',
              rotate: 0,
              color: '#fff'
            },
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#31f1c2'
              },
              {
                offset: 1,
                color: 'rgba(49,241,194,0.5)'
              }
            ]),
            barWidth: 15,
            symbol: 'roundRect',
          }, {
            barGap: '60%',
            data: getRandomNum(4, 300, 200),
            name: '市属国有企业',
            type: 'pictorialBar',
            legendHoverLink: true,
            label: {
              show: true,
              position: 'top',
              rotate: 0,
              color: '#fff'
            },
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#e9c950'
              },
              {
                offset: 1,
                color: 'rgba(233,201,80,0.5)'
              }
            ]),
            barWidth: 15,
            symbol: 'roundRect',
          }
        ]
      }
      this.charts.chart3.hideLoading();
      this.charts.chart3.setOption(option);
    }
  },
  beforeDestroy() {
    this.$bus.$off('resize')
  },
  mounted() {
    //顶部统计
    this.totalCount();
    //年度全市人才总量及投入
    this.getTalentTotal()
    //重点科研机构数据
    this.getImportantScientific();
    //人才技术领域
    this.initTechnology()
    this.initEnterpriseTalent()
    this.$bus.$on('resize', () => {
      Object.keys(this.charts).forEach((key) => {
        this.charts[key] && this.charts[key].resize()
      })
    })
  }
}
</script>

<style scoped lang="scss">
.statistical-3 {
  width: 100%;
  height: 100%;
  .talent-total{
    width: 100%;
    height: 100%;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    .talent-item{
      width: calc(50% - 10px);
      height: calc(50% - 10px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      .label{
        color: #fff;
      }
      .total{
        font-size: 32px;
        font-weight: bold;
        margin: 8px 0;
      }
      .compare{
        color: #fff;
        font-size: 14px;
        display: flex;
        align-items: center;
      }
    }
  }
  .important-scientific{
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    .scientific-title{
      border-left: 2px solid #1ea6f6;
      color: #fff;
      padding-left: 10px;
      margin-top: 5px;
      .title-style{
        width: 100%;
        height: 30px;
        display: flex;
        align-items: center;
        border: 1px solid #3f3f3f;
        padding: 0 10px;
        color: #fff;
        font-size: 12px;
        .amount{
          margin-left: 5px;
          color: #5cd7bb;
        }
        >img{
          margin-right: 5px;
          width: 15px;
          height: 15px;
        }
      }
    }
    .year{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 10px;
      padding-top: 10px;
      .year-item{
        width: calc(100%/2 - 5px);
        height: 65px;
        border-radius: 5px;
        border: 1px solid #47515a;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background: #0f1a1f;
        .year-text{
          color: #fff;
          font-size: 12px;
          text-align: center;
        }
        .number{
          color: #5dd9bd;
          font-size: 17px;
          font-weight: bold;
          display: flex;
          align-items: center;
          .unit{
            font-size: 12px;
            color: #5dd9bd;
            font-weight: normal;
          }
        }
      }
    }
    .scientific-info{
      width: 50%;
      height: 100%;
      .text{
        font-size: 17px;
        color:#fff;
        font-weight: bold;
        .number{
          font-size: 36px;
          color: #5cd7bb;
        }
      }
      .scientific-title{
        border-left: 2px solid #1ea6f6;
        color: #fff;
        padding-left: 10px;
        margin-top: 5px;
      }
    }
    .scientific-chart{
      width: 50%;
      height: 100%;
      .scientific-title{
        height: 25px;
        border-left: 2px solid #1ea6f6;
        color: #fff;
        padding-left: 10px;
        display: flex;
        align-items: center;
      }
      #chart1{
        width: 100%;
        height: calc(100% - 25px);
      }
    }
  }
  .talent-hatch{
    width: 100%;
    height: 100%;
    padding: 20px 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    .icon-number2{
      width: 50%;
      height: calc((100% - 100px)/2);
      margin-top: 20px;
    }
  }
}
</style>
